{% load static %}
{% load cache %}
{% load compress %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% block title %}
  <title>华大数极数据库管理系统主页</title>
  {% endblock %}

  {% compress css %}
  <!-- 解决 Not Found: /favicon2.ico -->
  <link href="{% static 'image/favicon.ico' %}" rel="shortcut icon" type="image/x-icon">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="{% static 'stylesheets/Google_Front.Source_Sans_Pro.css' %}">
  <!-- Font Awesome -->
  <!--  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">-->
  <link rel="stylesheet" href="{% static 'font-awesome/css/all.css' %}">
  <!-- DataTables -->
<!--  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.css' %}">-->
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-colreorder/css/colReorder.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables-select/css/select.bootstrap4.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'AdminLTE/dist/css/adminlte.min.css' %}">
  <style>
      /* 页面加载完后再显示，更好的显示特效 */
      body {
          display : none;
      }
    </style>

    <!-- 引入自定义的css样式-->
    <style>
      .fa-sign-out-alt:before {
        content: "\f2f5";
        font-weight: 900;
      }

      .fa-list-ul:before {
        content: "\f0ca";
        font-weight: 900;
      }

      .fa-wrench:before {
        content: "\f0ad";
        font-weight: 900;
      }

      button.button_group2+div+div {
        width: 200px;
        margin-top: 7px;
        margin-left: 18em;
        z-index: 1000;
      }

      button.button_group3+div+div {
        width: 200px;
        margin-top: 7px;
        margin-left: 30em;
        z-index: 1000;
      }

      button.dt-button.buttons-columnVisibility {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
        box-shadow: none;
        margin-top: 1px;
        border-radius: .25rem;
      }

      button.dt-button.buttons-columnVisibility.active{
        color: black;
        background-color: #003e80;
        border-color: black;
      }

  </style>
  {% endcompress %}

  {% block page_css %}

  {% endblock %}

  {% block specific_page_css %}
  <style>
    button.button_group1+div+div {
        width: 400px;
        margin-top: 7px;
        margin-left: 1em;
        z-index: 1000;
    }
  </style>
  {% endblock %}

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  {% cache 600 navbar %}
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/Home/" class="nav-link">主页 <i class="fa fa-home"></i></a>
      </li>
    </ul>

    <!-- SEARCH FORM -->
    <!-- 暂时省略
    -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search" id="urlSearch">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit" id="urlSearchSubmit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'logout' %}" role="button">
          退出登录 <i class="fa fa-sign-out-alt"></i>
        </a>
      </li>
    </ul>

  </nav>
  <!-- /.navbar -->
  {% endcache %}

  {% cache 600 sidebar_part1 %}
  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-teal elevation-4">
    <!-- Brand Logo -->
    <a href="#" class="brand-link">
      <img src="{% static 'image/华大数极logo.jpg' %}" alt="Logo" class="brand-image-xl img-circle elevation-3" style="opacity: .8">
      <span class="brand-text text-teal "> 华大数极</span>
    </a>
    {% endcache %}

    <!-- Sidebar -->
    <div class="sidebar" hidden="hidden">
      <!-- Sidebar user (optional) -->
      <!-- 暂时省略 -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="{{user.avatar.url}}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="/USER/UserInfo/" class="d-block text-teal">{{user.nick_name}}</a>
        </div>
      </div>

      {% cache 600 sidebar_part2 %}
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"
            id="sidebar_menu">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item">
            <a href="/Home/" class="nav-link">
              <i class="nav-icon fas fa-chart-line"></i>
              <p>
                网站概览
              </p>
            </a>
          </li>
          {% if perms.EMR.view_clinicalinfo %}
          <li class="nav-item has-treeview" id="sidebar_EMR">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-hospital"></i>
              <p>
                病历信息管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item">
                <a href="/EMR/ClinicalInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>临床信息概述</p>
                </a>
              </li>
              <li class="nav-item has-treeview menu-open">
                <a href="#" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>病理报告信息</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                <ul class="nav nav-treeview  pl-4">
                  <li class="nav-item">
                    <a href="/EMR/Pathology/LiverPathologicalInfo/" class="nav-link">
                      <i class="far fa-circle nav-icon text-info"></i>
                      <p>肝癌</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="#" class="nav-link">
                      <i class="far fa-circle nav-icon text-info"></i>
                      <p>肠癌</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="nav-item has-treeview menu-open">
                <a href="#" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>医院检查项目信息</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                <ul class="nav nav-treeview  pl-4">
                  <li class="nav-item">
                    <a href="/EMR/Test/TMDInfo/" class="nav-link">
                      <i class="far fa-circle nav-icon text-info"></i>
                      <p>肿瘤标志物检测</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="/EMR/Test/BiochemInfo/" class="nav-link">
                      <i class="far fa-circle nav-icon text-info"></i>
                      <p>生化检测</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a href="/EMR/FollowupInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>随访信息</p>
                </a>
              </li>
            </ul>
          </li>
          {% endif %}
          {% if perms.BIS.view_sampleinventoryinfo %}
          <li class="nav-item has-treeview" id="sidebar_BIS">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-dna"></i>
              <p>
                样本库信息管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item">
                <a href="/BIS/SampleInventoryInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>样本库存信息</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/BIS/SampleInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>样本信息</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/BIS/ExtractInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>核酸提取信息</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/BIS/DNAUsageRecordInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>核酸使用记录信息</p>
                </a>
              </li>
            </ul>
          </li>
          {% endif %}
          {% if perms.LIMS.view_methylibraryinfo %}
          <li class="nav-item has-treeview" id="sidebar_LIMS">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-biohazard"></i>
              <p>
                实验项目信息管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item has-treeview menu-open">
                <a href="#" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>甲基化检测</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                <ul class="nav nav-treeview  pl-4">
                  <li class="nav-item">
                    <a href="/LIMS/Methy/MethyLibraryInfo/" class="nav-link">
                      &nbsp;&nbsp;<i class="far fa-circle nav-icon text-info"></i>
                      <p>甲基化建库信息</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="/LIMS/Methy/MethyCaptureInfo/" class="nav-link">
                      &nbsp;&nbsp;<i class="far fa-circle nav-icon text-info"></i>
                      <p>捕获文库信息</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="/LIMS/Methy/MethyPoolingInfo/" class="nav-link">
                      &nbsp;&nbsp;&nbsp;<i class="far fa-circle nav-icon text-info"></i>
                      <p>pooling映射信息</p>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          {% endif %}
          {% if perms.SEQ.view_sequencinginfo %}
          <li class="nav-item has-treeview" id="sidebar_SEQ">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-calculator"></i>
              <p>
                分析结果管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item">
                <a href="/SEQ/SequencingInfo/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>测序上机信息</p>
                </a>
              </li>
              <li class="nav-item has-treeview menu-open">
                <a href="#" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>QC信息</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                <ul class="nav nav-treeview  pl-4">
                  <li class="nav-item">
                    <a href="/SEQ/QC/MethyQCInfo/" class="nav-link">
                      <i class="far fa-circle nav-icon text-info"></i>
                      <p>甲基化检测</p>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          {% endif %}
          <li class="nav-item has-treeview" id="sidebar_PROJ">
            <a href="/Home/" class="nav-link">
              <i class="nav-icon fas fa-project-diagram"></i>
              <p>
                项目信息管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item">
                <a href="#" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>项目样本管理</p>
                </a>
              </li>
            </ul>
          </li>

          {% if perms.ADVANCE.access_Advance %}
          <li class="nav-item has-treeview" id="sidebar_ADVANCE">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-wrench"></i>
              <p>
                高级功能
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview  pl-1">
              <li class="nav-item">
                <a href="/ADVANCE/AdvanceSearch/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>高级搜索</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/ADVANCE/AdvanceUpload/" class="nav-link">
                  <i class="fas fa-circle nav-icon text-info"></i>
                  <p>订制上传</p>
                </a>
              </li>
            </ul>
          </li>
          {% endif %}

        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
  <!-- /.sidebar -->
  {% endcache %}


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <div id="toTop"></div>
  <!-- Content Header (Page header) -->
      <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              {% block header_title %}
              <h1>网站概览</h1>
              {% endblock %}
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                  {% block header_ol %}
                  <li class="breadcrumb-item active">Home</li>
                  {% endblock %}
              </ol>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </section>

      <!-- Main content -->
      <section class="content">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-12">
                      <div class="card">
                        <div class="card-header">
                          {% block card-title %}

                          {% endblock %}
                        </div>
                          <!-- /.card-header -->
                          <div class="card-body">
                            {% block card-body %}
                              <h3 class="card-title fas fa-check-circle"> 病历信息管理</h3><br>
                              <a class="col-6 pl-4"><i class="fas fa-dot-circle"></i> 临床信息 总条目数: <a id="sum0"></a></a>
                              <a class="col-6"><i class="fas fa-dot-circle pl-4 pb-4"></i> 随访信息 总条目数: <a
                                      id="sum1"></a></a><br>
                              <h3 class="card-title fas fa-check-circle"> 样本库信息管理</h3><br>
                              <a class="col-6 pl-4"><i class="fas fa-dot-circle"></i> 样本库存信息 总条目数: <a id="sum2"></a></a>
                              <a class="col-6"><i class="fas fa-dot-circle pl-4 pb-4"></i> 核酸提取信息 总条目数: <a
                                      id="sum3"></a></a><br>
                              <h3 class="card-title fas fa-check-circle"> 实验项目信息管理</h3><br>
                              <a class="col-6 pl-4"><i class="fas fa-dot-circle"></i> 甲基化检测-甲基化建库信息 总条目数: <a id="sum4"></a></a>
                              <a class="col-6"><i class="fas fa-dot-circle pl-4 pb-4"></i> 甲基化检测-捕获建库信息信息 总条目数: <a
                                      id="sum5"></a></a><br>
                              <h3 class="card-title fas fa-check-circle"> 分析结果信息管理</h3><br>
                              <a class="col-6 pl-4"><i class="fas fa-dot-circle"></i> 测序上机信息 总条目数: <a id="sum6"></a></a>
                              <a class="col-6"><i class="fas fa-dot-circle pl-4 pb-4"></i> QC信息-甲基化检测 总条目数: <a
                                      id="sum7"></a></a><br>
                              <h3 class="card-title fas fa-check-circle"> 项目信息管理 总条目数: 0</h3><br>
                              <h3 class="card-title fas fa-check-circle pt-4 pb-4"> 用户管理信息 总条目数: <a id="sum8"></a></h3><br>
                            {% endblock %}
                          </div>
                      </div>
                  </div>
              </div>
            {% block plot_card %}
              <div class="row">
                  <div class="col-md-6">
                      <!-- Model Records -->
                      <div class="card">
                          <div class="card-header">
                              <h3 class="card-title">重要子表总条目数统计</h3>
                              <div class="card-tools">
                                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                          <div class="card-body">
                              <div id="recordSum"></div>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <!-- Model Records -->
                      <div class="card">
                          <div class="card-header">
                              <h3 class="card-title">用户行为统计</h3>

                              <div class="card-tools">
                                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                              </div>
                          </div>
                          <div class="card-body">
                              <div id="userSum"></div>
                          </div>
                      </div>
                  </div>
              </div>
            {% endblock %}
            <a href="#toTop" id="return2top" style="position:fixed;right:2em;bottom:2em"><i class="fas fa-chevron-circle-up"></i> 返回顶部</a>
          </div>
      </section>
  </div>

  <!-- Modal content -->
  <!-- urlSearch Modal -->
  <div class="modal fade" id="urlSearchModal">
      <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title text-info" id="modal_title">搜索结果</h4>
              </div>
              <div class="modal-body" id="urlSearchRes">
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
              </div>
          </div>
      </div>
  </div>

  {% block modal_html %}

  {% endblock %}

  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 1.0.1
    </div>
    <strong>Copyright &copy; 2014-2020 <a href="#">华大数极</a>.</strong> All rights reserved.
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

{% cache 600 sidebar_part3 %}
{% compress js %}
<!-- jQuery -->
<script src="{% static 'AdminLTE/plugins/jquery/jquery.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/jquery-ui/jquery-ui.js' %}"></script>
<!--<script src="{% static 'AdminLTE/plugins/popper/popper.min.js' %}"></script>-->
<!-- Bootstrap 4 -->
<script src="{% static 'AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- DataTables -->
<script src="{% static 'AdminLTE/plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/pdfmake/vfs_fonts.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-colreorder/js/dataTables.colReorder.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables-select/js/dataTables.select.min.js' %}"></script>
<!-- Highcharts -->
<script src="{% static 'Highcharts/highcharts.js' %}"></script>
<script src="{% static 'Highcharts/highcharts-more.js' %}"></script>
<script src="{% static 'Highcharts/modules/exporting.js' %}"></script>
<script src="{% static 'Highcharts/modules/offline-exporting.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'AdminLTE/dist/js/adminlte.min.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'AdminLTE/dist/js/demo.js' %}"></script>
<!-- custom javascript -->
<script src="{% static 'javascript/custom.js' %}"></script>
{% endcompress %}
{% endcache %}
<script>
  // 页面加载完后再显示, 更好的显示特效
document.addEventListener("DOMContentLoaded", function(){
    $("body").css("display", "block");
});

$(document).ready(function () {
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            let cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                let cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function csrfSafeMethod(method) {
        // 这些HTTP方法不要求CSRF包含
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    let csrftoken = getCookie('csrftoken');

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            $('.loading-indicator').show();
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        },
        complete: function (xhr, settings) {
            $('.loading-indicator').hide();
        }
    });

    Highcharts.setOptions({
        lang:{
             contextButtonTitle:"图表导出菜单",
             decimalPoint:".",
             downloadJPEG:"下载JPEG图片",
             downloadPDF:"下载PDF文件",
             downloadPNG:"下载PNG文件",
             downloadSVG:"下载SVG文件",
             viewFullscreen:"全屏查看",
             drillUpText:"返回 {series.name}",
             loading:"加载中",
             months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
             noData:"没有数据",
             numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
             printChart:"打印图表",
             resetZoom:"恢复缩放",
             resetZoomTitle:"恢复图表",
             shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
             thousandsSep:",",
             weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
        }
    });
    // urlSearch按钮功能实现
      $("#urlSearchSubmit").click(function (e) {
          e.preventDefault();
          $("#urlSearchRes").empty();
          let pattern = /^\s*$/;
          let query_str = $("#urlSearch").val();
          if (query_str === undefined || pattern.test(query_str) === true) {
              console.log("Warning! Nothing to search");
          } else {
              let res = $.ajax({
                  url: "{% url 'UrlSearch' %}", data: {query_str: query_str},
                  dataType: 'json', contentType: "application/json",
                  method: "GET", async: false
              }).responseJSON.res;
              let html_str = '<ul class="list-group mb-2">';
              if (res.length === 0){
                  html_str += '<h5>无结果</h5>';
              } else {
                  $.each(res, function (i, v) {
                      let num = i + 1;
                      $.each(v, function (k, v2) {
                            html_str += '<li class="list-group-item" style="border:0px"><h5>';
                            html_str += '<a href="' + v2 + '">' + num + '. ' + k;
                            html_str += '</a></h5></li>';
                      });
                  });
              }
              html_str += '</ul>';
              $("#urlSearchRes").append(html_str);
              $("#urlSearchModal").modal();
          }
      });
});
</script>
<!-- Modal javascript content -->
{% block modal_js %}

{% endblock %}
<!-- page script -->
{% block page-script %}
<script>
    $(document).ready(function () {
        $("#sidebar_menu li:eq(0) a").addClass("active");
        $(".sidebar").removeAttr("hidden");

        let url_list = [
            "/api/EMR/ClinicalInfo/", "/api/EMR/FollowupInfo/",
            "/api/BIS/SampleInventoryInfo/", "/api/BIS/ExtractInfo/",
            "/api/LIMS/Methy/MethyLibraryInfo/", "/api/LIMS/Methy/MethyCaptureInfo/",
            "/api/SEQ/SequencingInfo/", "/api/SEQ/QC/MethyQCInfo/",
            "/api/USER/UserInfo/"
        ];
        let records_sum = [];
        let highcharts_export_buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

        $.each(url_list, function (i, v) {
            let data = $.ajax({
              url: v, dataType: 'json', contentType: "application/json",
              type: "get", async: false, data: {fields: "id"}
            }).responseJSON;
            let sum = 0;
            if (data !== undefined) {
              sum = data.length;
            }
            $('#sum' + i).text(sum);
            records_sum.push(sum);
        });

        // 条形图： 重要子表总条目数统计
        $('#recordSum').highcharts({
            credits: {
                enabled: false,
                text: ''
            },
            chart: {
                type: 'bar'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['病历信息管理+临床信息', '病历信息管理+随访信息', '样本库信息管理+样本库存信息',
                  '样本库信息管理+核酸提取信息', '实验项目信息管理+甲基化检测-甲基化建库信息',
                  '实验项目信息管理+甲基化检测-捕获建库信息信息', '分析结果信息管理+测序上机信息', '分析结果信息管理+QC信息-甲基化检测',
                  '用户管理信息'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '总条目数',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b> 总条目数:<b>' + this.y + '</b>';
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        allowOverlap: true // 允许数据标签重叠
                    }
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                data: records_sum
            }],
            exporting: {
                buttons: {
                    contextButton: {
                      // 自定义导出菜单项目及顺序
                        menuItems: [
                            highcharts_export_buttons[4],
                            highcharts_export_buttons[5]
                        ]
                    }
                }
            }
        });


        // 条形图： 用户访问次数统计
        let behavior_data = $.ajax({
            url:"/api/USER/DatabaseRecord/", dataType: 'json', contentType: "application/json",
            type: "get", async: false, data:{ fields:"operation,userinfo,id" }
        }).responseJSON;
        let user_data = $.ajax({
            url:"/api/USER/UserInfo/", dataType: 'json', contentType: "application/json",
            type: "get", async: false, data:{ fields:"id,nick_name" }
        }).responseJSON;
        let visit_dict = {};
        let add_dict = {};
        let edit_dict = {};
        let del_dict = {};
        let user_dict = {};
        let valid_userinfo = {};
        $.each(behavior_data, function (i ,v) {
            if (valid_userinfo[v.userinfo] === undefined) {
                valid_userinfo[v.userinfo] = 1;
            } else {
                valid_userinfo[v.userinfo] += 1;
            }
            if (v.operation === '访问') {
                if (visit_dict[v.userinfo] === undefined) {
                    visit_dict[v.userinfo] = 1;
                } else {
                    visit_dict[v.userinfo] += 1;
                }
            } else if (v.operation === '单项添加') {
                if (add_dict[v.userinfo] === undefined) {
                    add_dict[v.userinfo] = 1;
                } else {
                    add_dict[v.userinfo] += 1;
                }
            } else if (v.operation === '单项更新') {
                if (edit_dict[v.userinfo] === undefined) {
                    edit_dict[v.userinfo] = 1;
                } else {
                    edit_dict[v.userinfo] += 1;
                }
            } else if (v.operation === '单项删除') {
                if (del_dict[v.userinfo] === undefined) {
                    del_dict[v.userinfo] = 1;
                } else {
                    del_dict[v.userinfo] += 1;
                }
            }
        });
        $.each(user_data, function (i ,v) {
            user_dict[v.id] = v.nick_name
        });

        let valid_nick_name = [];
        let valid_visit = [];
        let valid_add = [];
        let valid_edit = [];
        let valid_del = [];
        $.each(valid_userinfo, function (k ,v) {
            valid_nick_name.push(user_dict[k]);
            if (visit_dict[k] === undefined) {
                valid_visit.push(0);
            } else {
                valid_visit.push(visit_dict[k]);
            }
            if (add_dict[k] === undefined) {
                valid_add.push(0);
            } else {
                valid_add.push(add_dict[k]);
            }
            if (edit_dict[k] === undefined) {
                valid_edit.push(0);
            } else {
                valid_edit.push(edit_dict[k]);
            }
            if (del_dict[k] === undefined) {
                valid_del.push(0);
            } else {
                valid_del.push(del_dict[k]);
            }
        });

        // 画图，用户行为记录条形图
        $('#userSum').highcharts({
            credits: {
                enabled: false,
                text: ''
            },
            chart: {
                type: 'bar'
            },
            title: {
                  text: null
            },
            xAxis: {
                categories: valid_nick_name,
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '总次数',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b> 总次数:<b>' + this.y + '</b>';
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        allowOverlap: true // 允许数据标签重叠
                    }
                }
            },
            series: [
                {
                  name: "访问",
                  data: valid_visit
                },{
                  name: "单项添加",
                  data: valid_add
                },{
                  name: "单项更新",
                  data: valid_edit
                },{
                  name: "单项删除",
                  data: valid_del
                }
            ],
            exporting: {
                buttons: {
                    contextButton: {
                      // 自定义导出菜单项目及顺序
                        menuItems: [
                            highcharts_export_buttons[4],
                            highcharts_export_buttons[5]
                        ]
                    }
                }
            }
        });

    });
</script>
{% endblock %}
</body>
</html>